<template>
  <el-select clearable
             filterable
             v-bind="$attrs"
             placeholder="请选择承运方"
             @input="handleInput">
    <el-option v-for="item in carrier"
               :key="item.name"
               :label="item.name"
               :value="item.name">
    </el-option>
  </el-select>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  name: "CarrierNameSelect",
  inheritAttrs: true,
  computed: {
    ...mapState({
      carrier: (state) => state.basic.carrier
    })
  },
  created () {
    console.log("loadCarrier", this.carrier);
    if (this.carrier.length < 1) this.loadCarrier();
  },
  methods: {
    ...mapActions({
      loadCarrier: "basic/loadCarrier"
    }),
    handleInput (value) {
      this.$emit("input", value);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
